import '@babel/polyfill';
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
import gsap from 'gsap';
import * as dat from 'dat.gui';
import { DoubleSide } from 'three';

//场景
const scene =new THREE.Scene();

//相机
const camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,200);
camera.position.set(5,3,5);
scene.add(camera);

//渲染器
const renderer=new THREE.WebGL1Renderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);


//buffergeometry创建矩形
const geometry=new THREE.BufferGeometry();
const vertices=new Float32Array([
    -1.0,-1.0,1.0,
    1.0,-1.0,1.0,
    1.0,1.0,1.0,

    -1.0,-1.0,1.0,
    -1.0,1.0,1.0,
    1.0,1.0,1.0,
]);
//绘制三角面时有一定顺序，默认渲染逆时针顺序绘制的那个面
geometry.setAttribute('position',new THREE.BufferAttribute(vertices,3));
const material=new THREE.MeshBasicMaterial({color:0xff0000,side:DoubleSide});
const mesh=new THREE.Mesh(geometry,material);
scene.add(mesh);

//控制
const orbitControls=new OrbitControls(camera,renderer.domElement);
orbitControls.enableDamping=true;

//坐标轴
const axesHelper=new THREE.AxesHelper(5);
scene.add(axesHelper);


//帧动画
function animate(){
    orbitControls.update();
    renderer.render(scene,camera);
    requestAnimationFrame(animate);
};
animate();

//窗口调整侦听
window.addEventListener('resize',()=>{
    camera.aspect=window.innerWidth/window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth,window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
});



